<template>
  <div class="import-dialog-view">
    <div class="import-dialog">
      <div class="title">
        <p>{{ $t('message.rightMessage.tab3.label_6') }}</p>
        <i class="el-icon-close" @click="$emit('CloseDialog')"></i>
      </div>
      <div class="import-dialog-body">
        <div class="row">
          <p class="label">{{ $t('message.rightMessage.tab3.label_7') }}</p>
          <el-input v-model="value" class="ipt yellow"></el-input>
        </div>
        <div class="row">
          <p class="label">{{ $t('message.rightMessage.tab3.label_8') }}</p>
          <el-upload class="upload-demo" drag :action="action" :multiple="false" ref="upload" style="textalign: center"
            :on-error="uploadFalse" :on-success="uploadSuccess" :auto-upload="false" :before-upload="beforeAvatarUpload"
            :data="form" :file-list="fileList" :headers="token">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              {{ $t('message.rightMessage.tab3.label_9') }}
              <em>{{ $t("message.homePageTable.finishedFile") }}</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              <p>Supportted files:</p>
              <p>CAD: ["dwg","dxf"]</p>
              <p>IMAGE: ["svg","bmp","png","jpg","tif","tiff","wmf"]</p>
              <p>Document: ["pdf","xls","xlsx","doc","docx","ppt","pptx"]</p>
              <p>Others: ["zip","rar","7Z"]</p>
              <p>※size limit: 500MB</p>
            </div>
          </el-upload>
        </div>
        <span slot="footer" class="dialog-footer">
          <button @click="$emit('CloseDialog'), (fileList = [])" class="btn">
            {{ $t("message.public.cancel") }}
          </button>
          <button type="primary" class="btn" @click="submitUpload()">
            {{ $t("message.public.confirm") }}
          </button>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import BASE from "../../../utils/base";
import { getLocalStorage } from "../../../utils/storage";
export default {
  name: "ImportDialog",
  props: ["title", "_api"],
  data() {
    return {
      form: {
        account: getLocalStorage("userName"),
        userID: getLocalStorage("userID"),
        isExist: false,
      },
      fileList: [],
      action: BASE.IP + this._api,
      token: {
        Authorization:
          "Bearer " +
          (sessionStorage.token && getLocalStorage("token")
            ? sessionStorage.token
            : ""),
      },
      value: "",
    };
  },
  components: {},
  watch: {},
  methods: {
    //文件上传失败触发
    uploadFalse(response, file, fileList) {
      this.$alert('システムエラーが発生しました。ご迷惑をお掛けして申し訳御座いません。システム管理者に問い合わせください。', '', {
        confirmButtonText: 'OK',
        type: 'warning',
      });

    },
    //文件上传成功触发
    uploadSuccess(response, file, fileList) {
      if (response.code == 0) {
        this.fileList = [];
        this.$message({
          message: this.$t("message.homePageTable.suploaded"),
          type: "success",
        });
      } else if (response.code == -311) {
        window.open(response.data);
      } else {
        this.$alert(this.$t("message.homePageTable.euploaded"), '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });
      }
    },
    // 上传前対文件的大小和类型的判断
    beforeAvatarUpload(file) {
      console.log(file.size);
      if (file.size > 524288000) {
        this.$alert(this.$t('message.public.tip2'), '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });
        return false;
      }

    },
    //表单提交
    submitUpload() {
      if (!this._api) {
        this.$alert("In function development...", '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });
        return;
      }
      this.$refs.upload.submit();
    },
    //表单取消
    // onCancel() {
    //   this.fileList = [];
    //   this.$emit("CloseDialog");
    // },
  },
  created() { },
  mounted() { },
  beforeDestroy() { },
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.import-dialog-view {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 6;

  .import-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 488px;
    min-height: 393px;
    background: #ffffff;
    box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
      0px 9px 28px 0px rgba(0, 0, 0, 0.08),
      0px 6px 16px -8px rgba(0, 0, 0, 0.15);

    .title {
      // width: 100%;
      height: 42px;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      font-size: 16px;
      margin-bottom: 12px;

      p {
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
      }

      .el-icon-close {
        cursor: pointer;
      }
    }
  }

  .upload-demo {
    width: calc(100% - 114px);

    // margin: 0 auto;
    // margin-top: 24px;
    ::v-deep .el-upload {
      width: 100%;
    }

    ::v-deep .el-upload-dragger {
      width: 100%;
    }

    ::v-deep .el-upload__tip {
      p {
        margin-bottom: 4px;
      }
    }
  }

  .dialog-footer {
    margin: 24px 0;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
      width: 82px;
      height: 32px;
      background: #ffffff;
      border: 1px solid #d9d9d9;
      cursor: pointer;
    }

    button:nth-child(2) {
      margin-left: 16px;
      color: #ffffff;
      background: #106ebe;
    }

    ::v-deep .el-button:hover,
    .el-button:focus {
      color: none;
    }
  }

  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    margin-bottom: 12px;

    .label {
      width: 100px;
      height: 32px;
      line-height: 32px;
    }

    .label::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
  }

  .ipt {
    width: calc(100% - 114px);
    height: 32px;

    ::v-deep .el-input__inner {
      width: 100%;
      height: 32px;
    }

    ::v-deep .el-input__inner:focus {
      border: 1px solid #dcdfe6;
    }

    ::v-deep .el-input__icon {
      line-height: 32px;
      color: #909399;
    }

    ::v-deep .el-input__suffix {
      width: 32px;
      right: 0;
      background: #dee0e3;
    }
  }

  .yellow {
    ::v-deep .el-input__inner {
      background: #ffffe1;
    }
  }
}
</style>
